<template>
  <div class="header" style="display:flex">
    <div class="header_image"><img style="width:180px;height:40px;padding-top:5px;padding-left:30px" src="@/assets/login/icon_logo.png" alt=""></div>
    <div class="header_icon" style="padding-top:13px;padding-left:40px" ><i  style="font-size: 20px;" class="el-icon-s-unfold"></i></div>
     <div class="header_span" >
       <span v-if="setstatus===1" class="header_span_status">营业中</span>
       <span v-else class="header_span_status1">打烊中</span>
     </div>
      <div class="header_pop" >
       <div  class="header_pop_status" style="display:flex;">
         <img @click="handleStatus" style="width:20px;height:20px;"  src="@/assets/time.svg" alt="">
         <span @click="handleStatus" class="header_pop_status_span">营业状态设置</span>
       </div>
         <!-- 营业状态弹层 -->
         <el-dialog title="营业状态设置"
               :visible.sync="dialogVisible"
               width="30%"
               :show-close="false">
      <el-radio-group v-model="setstatus" v-removeAriaHidden>
        <el-radio :label="1">
          营业中
          <span>当前餐厅处于营业状态，自动接收任何订单，可点击打烊进入店铺打烊状态。</span>
        </el-radio>
        <el-radio :label="0">
          打烊中
          <span>当前餐厅处于打烊状态，仅接受营业时间内的预定订单，可点击营业中手动恢复营业状态。</span>
        </el-radio>
      </el-radio-group>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="handleSave">确 定</el-button>
      </span>
         </el-dialog>
       </div>

       <!-- 管理员 -->
       <div class="header_admin" >
          <el-select v-model="admin" placeholder="管理员" class="header_admin_select">

           <el-option  label="修改密码" value="1"><span @click="editpw" style="padding-right:8px">修改密码</span><i class="el-icon-lock"/></el-option>
           <el-option  label="退出登录" value="2"> <span @click="logout" style="padding-right:8px">退出登录</span><i class="el-icon-switch-button"/>  </el-option>
        </el-select>
       </div>
  <PasswordVue :isshow="isshow"></PasswordVue>
  </div>
</template>

<script>
import PasswordVue from '@/components/header/password.vue'
// 公共组件
import Bus from '@/utils/EventBus'
import { setstatus, querystatus } from '@/api/status'
export default {
  name: 'headerIndex',
  components: {
    PasswordVue
  },
  data () {
    return {
      setstatus: '',

      dialogVisible: false,

      admin: '',
      isshow: false
    }
  },
  created () {
    this.querystatus()
  },
  methods: {
    handleStatus () {
      this.dialogVisible = true
    },
    // 查询门店状态
    async querystatus () {
      const res = await querystatus()
      this.setstatus = res.data
      console.log(res)
    },

    // 门店状态切换
    async  handleSave () {
      this.dialogVisible = false
      // 设置状态
      const res = await setstatus(this.setstatus)
      console.log(res, 'res')
    },
    // 修改密码
    editpw () {
      // 传值给子组件
      Bus.$emit('sendMsg', !this.isshow)
      console.log(!this.isshow, '11')
    },
    // 退出登录
    logout () {
      this.$router.push('/login')
    }
  }

}
</script>

<style lang="less" scoped>

.header{

 height: 55px;
  background-color: orange;
   padding-top: 5px;
   margin-left: -19px;

  width: 117%;
  border: none;

}
.header_span{
  margin-left: 40px;
  margin-top: 13px;

.header_span_status{

  color: #ccc;
   background-color: red;
}
.header_span_status1{

  color: #ccc;
   background-color: rgb(26, 23, 23);
}

}
.header_pop_status{
  margin-left: 750px;
  padding-top: 12px;
  .header_pop_status_span{
    padding-left: 2px;
    line-height: 18px;
  }
}

// 弹窗

  .el-dialog {
    min-width: auto !important;

  }
  .el-dialog__header {
    height: 61px;
    line-height: 60px;
    background: #fbfbfa;
    padding: 0 30px;
    font-size: 16px;
    color: #333;
    border: 0 none;
  }
  .el-dialog__body {
    padding: 10px 30px 30px;
    .el-radio,
    .el-radio__input {
      white-space: normal;
    }
    .el-radio__label {
      padding-left: 5px;
      color: #333;
      font-weight: 700;
      span {
        display: block;
        line-height: 20px;
        padding-top: 12px;
        color: #666;
        font-weight: normal;
      }
    }
    .el-radio__input.is-checked .el-radio__inner {
      &::after {
        background: #333;
      }
    }
    .el-radio-group {
      & > .is-checked {
        border: 1px solid #ffc200;
      }
    }
    .el-radio {
      width: 80%;
      background: #fbfbfa;
      border: 1px solid #e5e4e4;
      border-radius: 4px;
      padding: 14px 22px;
      margin-top: 20px;
    }
   /*  .el-radio__input.is-checked + .el-radio__label {
      span {
      }
    } */
  }
  .el-badge__content.is-fixed {
    top: 24px;
    right: 2px;
    width: 18px;
    height: 18px;
    font-size: 10px;
    line-height: 16px;
    font-size: 10px;
    border-radius: 50%;
    padding: 0;
  }
  .badgeW {
    .el-badge__content.is-fixed {
      width: 30px;
      border-radius: 20px;
    }
  }

// 管理员
.header_admin{
  width: 120px;

  padding-left: 40px;
  padding-top: 6px;

//background-color:#ffc200

}

// 修改下拉框的背景色
.header_admin_select /deep/ .el-input__inner {
  height: 35px;
  border: none;
  background: #ffc400 !important;

}
// 管理员的字体样式
.header_admin_select /deep/ .el-input__inner::placeholder {
color: rgb(22, 21, 21);
font-weight: 550;

}

.header_admin_select /deep/ .el-input .el-select__caret{//箭头样式
  color: black; /* 更改为你想要的颜色 */
    font-weight: 600;
}
</style>
